<template>
  <view class="content">
    <view class="wrapper-qr">
      <view v-if="!posterPath">
        <img :src="bgImage" :style="{width:pageBody.pageWidth+'px',height:bgImageHeight+'px'}" alt="海报"/>
        <view style="display: flex;padding: 10px 10px">
          <view style="">
            <!--            #ifndef MP-->
            <TkiQrcode
                ref="qrcode"
                cid="9527"
                :size="250"
                :val="invite.shareCode"
                :foreground="themConfig.theme.color"
                :pdground="themConfig.theme.color"
                :onval="true"
                :loadMake="true"
                :showLoading="showLoading"
                @result="qrR"
            />
            <!--            #endif-->
            <!--            #ifdef MP-->
            <!--            <img :src="qrCode" :style="{width:'130px',height:'130px'}" alt="邀请码"/>-->
            <!--            #endif-->
          </view>
          <view style="margin-left: 20px;margin-top: 20px;">
            <uv-text :text="invite.userName+'邀请您加入'"></uv-text>
            <view style="margin-top: 20px">微信扫一扫或者长按识别二维码</view>
          </view>
        </view>
      </view>
      <view v-else>
        <img :src="posterPath" :style="{width:pageBody.pageWidth+'px',height:canvasHeight+'px'}" alt="海报"/>
      </view>
      <canvas canvas-id="posterCanvas" id="posterCanvas"
              :style="{width:pageBody.pageWidth+'px',height:canvasHeight+'px'}">
      </canvas>
    </view>

    <view style="width: 60%;;margin-top: 40rpx;margin-left: 20%">
      <view style="color: #767a82" v-for="tr in rules[0].rules" v-if="tr.code==='inviter' && tr.value > 0">
        邀请一个新用户，该用户每下一笔单，将获得该笔订单的
        <text :style="{color: themConfig.theme.color,'font-size': '25px'}">{{ tr.value }}</text>
        % 收益
      </view>
    </view>
    <view style="display: flex;justify-content: space-between;padding: 20px 10%">
      <!--      #ifndef MP-->
      <uv-button type="primary" plain disabled :color="themConfig.theme.color" @click="" text="长按海报保存至相册"></uv-button>
      <uv-button type="success" @click="copyShareLink" text="复制链接给微信好友"></uv-button>
      <!--      #endif-->

      <!--      #ifdef MP-->
      <uv-button type="primary" @click="saveToLocal(posterPath)" plain :color="themConfig.theme.color" text="点击保存至相册"></uv-button>
      <button class="share-btn" open-type="share">分享至微信好友</button>
      <!--      #endif-->

    </view>
  </view>
</template>

<script>
import {mixins} from './index.js'

export default {
  mixins: [mixins]
}
</script>
<style scoped>

* {
  overflow-y: hidden;
}


.share-btn {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 3px;
  color: #fff;
  background-color: #5ac725;
  border-color: #5ac725;
  border-width: 1px;
  font-size: 14px;
}
#posterCanvas {
  position: fixed;
  left: 1000px;
}

.wrapper-qr {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  background: white;
  //justify-content: center;
  height: 100%;
  //position: relative;
  //padding-top: 40rpx;
}

.time {
  margin-top: 30rpx;
  display: flex;
}

.tip {
  margin: 40rpx 0;
}

.rules {
  margin: 40rpx 0;
}

.table {
  margin: 60rpx 0;
}

.th {
  text-align: center;
  margin: 10rpx 0;
}

.tr-wrapper {
  display: flex;
}

.td {
  text-align: center;
  padding: 10rpx 30rpx;
}
</style>
